var gulp = require('gulp');
// 引入组件
var minifycss = require('gulp-minify-css'), // CSS压缩
  uglify = require('gulp-uglify'), // js压缩
  concat = require('gulp-concat'), // 合并文件
  rename = require('gulp-rename'), // 重命名
  clean = require('gulp-clean'), //清空文件夹
  minhtml = require('gulp-htmlmin'), //html压缩
  jshint = require('gulp-jshint'), //js代码规范性检查
  imagemin = require('gulp-imagemin'), //图片压缩 安装 7.1.0
  browserSync = require('browser-sync'),
  sass = require('gulp-sass')(require('sass')),
  babel = require('gulp-babel');




gulp.task('index', gulp.series(function (cb) {
  console.log('html');
  return gulp.src('src/*.html')
    .pipe(minhtml({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('dist'));
}));
gulp.task('html', gulp.series(function (cb) {
  console.log('html');
  return gulp.src('src/html/*.html')
    .pipe(minhtml({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('dist/html/'));
}));
// html文件 √
gulp.task('css', gulp.series(function (cb) {
  console.log('css')
  gulp.src('src/css/*.css')
    .pipe(concat('main.css'))
    // merge合并文件名
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css/'));
  cb();
}));
// css文件 √

gulp.task('sass', gulp.series(function (cb) {
  gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css/'))
  cb();
}));
// sass文件

gulp.task('es6', gulp.series(function (cb) {
  gulp.src('src/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('src/js/es5/'));
  cb();
}));
// es6 转es5

gulp.task('js', gulp.series(function (cb) {
  console.log('js');
  gulp.src('src/js/es5/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    // merge合并文件名
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
  cb();
}));
// js文件
gulp.task('img', gulp.series(function (cb) {
  console.log('img');
  gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images/'));
  cb();
}));
// 声明一个图片压缩的命令 将src/images下面的所有文件 压缩放置dist/images文件夹下面
gulp.task('clear', gulp.series(function (cb) {
  console.log('clear')
  gulp.src('dist/*', {
      read: false
    })
    .pipe(clean());
  cb();
}));
// 打包之前先清空文件

gulp.task('build', gulp.series('clear', 'sass', 'es6', 'index', 'html', 'img', 'js', 'css'));
// 一次性打包


// var watcher = gulp.watch('src/js/*.js', gulp.series('es6'));
// // 监听的文件路径 以及执行事件

// watcher.on('change', gulp.series(function (event) {
//   console.log('js文件已被重新打包好了');
// }));

// cnpm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev  bable安装
// browser-sync start --server --files "**/*.css,**/*.html,**/*.js"单纯调试静态页面或者css、js时 浏览器热启动执行代码
//browser-sync start --proxy 'localhost:8081' --files src  已有express服务器 动态网站

// 开发的时候 没有服务器的时候
gulp.task('serve', gulp.series(function () {
  console.log('执行代码');
  browserSync.init({
    files: ['**'],
    server: {
      baseDir: 'src', // 设置服务器的根目录
      index: '/index.html' //指定默认启动文件
    },
    port: 3000 // 指定访问服务器的端口号
  });
  gulp.watch('src/sass/*.scss',gulp.series('sassindex'))

}));
// sass文件需要先编译
gulp.task('sassindex', gulp.series(function (cb) {
  gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(concat('index.css'))
    // merge合并文件名
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(minifycss())
    .pipe(gulp.dest('src/css/')).
    pipe(browserSync.reload({
      stream: true
    }));
    // 重新加载
  cb();
}));



gulp.task('default', gulp.series('sassindex','serve'));
//gulp browser-sync 浏览器热启动  静态文件 跑一个服务器 刷新之前打包sass文件

// concurrently 同时执行两个命令